<template>
  <div
    class="w-full flex flex-col rounded-2xl shadow-lg bg-white dark:bg-gray-800 overflow-hidden border border-gray-200 dark:border-gray-700"
  >
    <ArticleHeader
      v-if="isArticle"
      :title="article.title"
      :create-time="article.createTime"
      :visit-count="article.visitCount"
      :html="article.content"
    />
    <ArticleHeaderSkeleton v-else />
    <div class="border-t border-gray-200 dark:border-gray-600 mx-6 sm:mx-8"></div>
    <HtmlPreview :html="article.content" v-if="isArticle" />
    <MdPreviewSkeleton v-else />
    <div>
      <el-divider border-style="dashed" content-position="left" class="custom-divider">
        <div class="flex items-center gap-2">
          <span class="text-gray-800 dark:text-gray-200 font-medium">声明</span>
        </div>
      </el-divider>
      <!-- 作者著作权 -->
      <div
        class="mx-6 sm:mx-8 my-2 p-4 border-2 border-dashed border-slate-300 dark:border-slate-500 rounded-2xl shadow-lg"
      >
        <div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm">
          <strong>本文作者： </strong>
          <span
            v-if="isArticle"
            class="font-medium transition-all duration-300 px-2 py-1 rounded-md hover:-translate-y-0.5"
          >
            {{ article.author }}
          </span>
          <span
            v-else
            class="font-medium transition-all duration-300 px-2 py-1 rounded-md hover:-translate-y-0.5"
          >
            sin
          </span>
        </div>
        <div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm mt-2">
          <strong>本文链接： </strong>
          <a
            class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-all duration-300 px-2 py-1 rounded-md hover:-translate-y-0.5"
            :href="env.VITE_FRONTEND_URL + route.path"
            target="_blank"
          >
            {{ env.VITE_FRONTEND_URL + route.path }}
          </a>
        </div>
        <div class="text-slate-600 dark:text-slate-300 leading-relaxed text-sm mt-2">
          <strong>版权声明： </strong>
          &nbsp;本站所有文章除特别声明外，均采用 &nbsp;
          <a
            class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-all duration-300 px-2 py-1 rounded-md hover:-translate-y-0.5"
            href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
            target="_blank"
          >
            CC BY-NC-SA 4.0
          </a>
          &nbsp; 许可协议。转载请注明文章出处！
        </div>

        <!-- 分享按钮放到下一行右下角 -->
        <div class="flex justify-end mt-4">
          <div
            class="flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-medium rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 active:translate-y-0 shadow-md"
            @click="copyToClipboard"
          >
            <Icon
              name="fenxiang"
              width="18"
              height="18"
              class="text-sm transition-transform duration-300 group-hover:rotate-12 group-hover:scale-110"
            />
            <span class="text-xs">分享</span>
          </div>
        </div>
      </div>
      <div class="my-6">
        <el-tooltip class="box-item" effect="light" placement="top" :show-arrow="false">
          <template #content>
            <div
              class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"
            >
              <div class="text-center">
                <div class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                  支付宝打赏
                </div>
                <el-image
                  src="http://silent-moment.site/img/blog/pay.jpg"
                  class="w-32 h-32 rounded-lg shadow-md bg-white dark:bg-gray-800"
                  fit="cover"
                />
                <div class="text-xs text-gray-500 dark:text-gray-400 mt-2">扫码打赏</div>
              </div>
            </div>
          </template>
          <div class="flex items-center justify-center gap-2">
            <div
              class="flex items-center justify-center gap-2 px-3 py-1.5 bg-gradient-to-r from-blue-400 to-cyan-500 hover:from-blue-500 hover:to-cyan-600 text-white font-medium rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 active:translate-y-0 shadow-md"
            >
              <Icon
                name="dashang2"
                width="18"
                height="18"
                class="transition-transform duration-300 group-hover:rotate-12 group-hover:scale-110"
              />
              <span class="text-sm">ヾ(≧▽≦*)o！</span>
            </div>
          </div>
        </el-tooltip>
      </div>
    </div>
    <CommentSection :article-id="123" article-title="article.title" />
  </div>
</template>
<script lang="ts" setup>
import router from '@/router'
const env = import.meta.env
const props = defineProps<{
  article: any
}>()
const isArticle = computed(() => !!props.article && !!props.article.title)

const { article } = toRefs(props)
const route = useRoute()
// 分享
const copyToClipboard = async () => {
  try {
    const content = `欢迎访问博客文章：${article.value.title} \n通往地址：${env.VITE_FRONTEND_URL}${route.path}`
    // 替换为你要分享的实际内容
    await navigator.clipboard.writeText(content)
    ElMessage.success('已复制分享链接')
  } catch (error) {
    ElMessage.error('复制失败，请联系网站管理员')
  }
}
</script>

<style scoped>
/* 修复分割线在夜间模式下的边框颜色 */
:deep(.custom-divider .el-divider__text) {
  background-color: transparent !important;
}

:deep(.custom-divider .el-divider--horizontal) {
  border-top-color: #d1d5db !important; /* 浅灰色边框 */
}

:deep(.dark .custom-divider .el-divider--horizontal) {
  border-top-color: #6b7280 !important; /* 夜间模式下的深灰色边框 */
}

/* 分享按钮悬停效果 */
.share-button:hover svg-icon {
  transform: rotate(12deg) scale(1.1);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .copyright {
    margin: 1rem 0;
    padding: 1rem;
  }

  .author,
  .link,
  .license {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .license_text {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .share-button {
    width: 100%;
    justify-content: center;
    padding: 1rem 2rem;
  }
}

@media (max-width: 480px) {
  .copyright {
    padding: 0.75rem;
    margin: 0.75rem 0;
  }

  .author,
  .link,
  .license {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .license > div:first-child {
    justify-content: flex-start;
  }
}
</style>
